<template>
    <el-row style="width: auto;display: flex;justify-content: center;align-items: center;">
        <div style="margin-top: 0px;margin-right: 3px;" v-if="max">共有{{ max }}篇文章</div>
        <el-pagination background layout="prev, pager, next,sizes" :total="max" v-model="nowPage"
            :page-sizes="[10, 20, 50, 100,]" @current-change="handleChange" @size-change="handleSizeChange" />
    </el-row>
</template>


<script>
import { ref } from 'vue';

export default {
    name: "pageComponents2Class",
    props: {
        max: {
            type: String,
            require: true,
        }
    },
    setup(props, context) {
        let nowPage = ref(1);
        let sizes = ref(10);
        let handleChange = (val) => {
            const container = document.querySelector(".el-main");
            if (container) {
                container.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            nowPage.value = val;
            context.emit("pageChange", nowPage.value);
        }
        let handleSizeChange = (val) => {
            const container = document.querySelector(".el-main");
            if (container) {
                container.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            sizes.value = val;
            context.emit("siezsChange", sizes.value);
        }

        return {
            handleChange,
            handleSizeChange,
            sizes,
            nowPage,
        }
    }
}

</script>

<style scoped></style>